<script setup lang="ts">
import { useAppStore } from '@/stores/app.store'
const version = __VERSION__
const displayName = __DISPLAY_NAME__
const gitURL = __GITHUB_URL__
const gitCommit = __GIT_COMMIT__
const gitCommitURL = `${gitURL}/commit/${gitCommit}`
import IconParkSuccess from '~icons/icon-park/success';
import IconParkPauseOne from '~icons/icon-park/pause-one';
const store = useAppStore()

const name = computed(() => store.name)
const count = computed(() => store.count)
console.log(name, 111)

function start() {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs:any) {
			// 通知 content.js 提供选择 dom 的功能
      console.log('7777777777777777', tabs)
			chrome.tabs.sendMessage(tabs[0].id, { type: 'select-dom', currentTabInfo: tabs[0] });
		});

		// 关闭面板 
		window.close();
}
let innerHTML: any = ref('')
let eventData: any = ref([])
onMounted(() => {
  chrome.storage.local.get('eventData', (res) => {
    console.log('eventData', res)
    eventData.value = res.eventData
  })
})
</script>

<template>
  <div class="text-center m-4 mt-0 flex flex-col gap-y-2">
  <div class="new text-right">
    <button class="btn btn-info"  @click="start">+ 新增监控</button>
  </div>
    <div v-if="eventData && eventData.length" class="list flex flex-col gap-y-2 overflow-hidden">
      <table class="table">
      <!-- head -->
      <thead class="bg-base-400">
          <tr>
            <th>监控标题</th>
            <th>监控页面</th>
            <th>状态</th>
            <th>监控内容</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item, index) in eventData"
            :key="index"
          >
            <td>{{ item.monitorName }}</td>
            <td>
              <a
                :href="item.url"
                target="_blank"
                class="link"
              >
                {{ item.title }}
              </a>
            </td>
            <td>
              <IconParkSuccess v-if="item.monitorStatus"/>
              <IconParkPauseOne v-else/>
            </td>
            <td class="max-w-xl">
              <div
                class="tooltip"
                :data-tip="item.innerHTML"
              >
                {{ item.innerHTML.slice(0, 100) }}
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <Empty v-else/>
  </div>
</template>

<style scoped>
.btn {
  @apply px-4 py-2 rounded-md bg-blue-500 text-white;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
